// 入口
import Vue from 'vue'

// 1.1  导入路由的包
import VueRouter from '_vue-router@3.1.3@vue-router/dist/vue-router'


// 1.2  安装路由
Vue.use(VueRouter)

// 导入格式化事件的插件
import moment from 'moment'
// 定义全局过滤器
Vue.filter('dateFormat', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern)
})
// 2.1  导入vue-resource
import VueResource from '_vue-resource@1.5.1@vue-resource'

// 2.2  安装vue-resource
Vue.use(VueResource)

// 安装图片预览插件
import VuePreview from 'vue-preview'

Vue.use(VuePreview)

// 安装vuex的步骤
// 1. 下载并导入包
import Vuex from 'vuex'
// 2. 注册vuex
Vue.use(Vuex)

// 设置请求跟路径
Vue.http.options.root = 'http://www.liulongbin.top:3005'
// 设置全局post时候表单数据格式组织形式,application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true;

// 按需导入 Mint-UI 中的组件
// import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui'

// Vue.use(Lazyload);
// Vue.component(Header.name, Header)
// Vue.component(Swipe.name, Swipe)
// Vue.component(SwipeItem.name, SwipeItem)
// Vue.component(Button.name, Button)
import MintUi from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUi)
// 导入MUI 样式
import './lib/MUI/css/mui.min.css'

import './lib/MUI/css/icons-extra.css'
// 导入app跟组件
import app from './app.vue'

// 1.3  导入路由模块
import router1 from './router'

// 每次刚进入网站，肯定会调用index.js 在刚调用时，先从本地存储中吧购物车的数据读出来，
// 放入store中
var car = JSON.parse(localStorage.getItem('car') || '[]')

// 3. new Vuex.Store()实例 等得到一个数据存储对象
var store = new Vuex.Store({
  state: {
    // state相当于data  用来存储数据
    car: car  /*将购物车中的商品的数据，用一个数组存储起来，
              在car数组中，存储一些商品的对象 如：{id：商品id,count:购买数量,price:单价,selected：是否选中}*/

  },
  mutations: {
    // mutations相当于 methods
    addToStore(state, goodsinfo) {
      // 点击加入购物车，把商品信息，保存到store中的car上
      // 1. 如果购物车中，之前就已经有这个对应的商品了，只需要更新数量
      // 2. 如果购物车中，没有这个对应的商品，则需要push到car中

      // 假设在购物车中，没有找到对应商品
      var flag = false;

      state.car.some(item => {
        if (item.id == goodsinfo.id) {
          item.count += parseInt(goodsinfo.count);
          flag = true
          return true; //找到了终止循环
        }
      })

      // 循环完毕还是没找到，鸡flag为false，则push
      if (flag === false) {
        this.state.car.push(goodsinfo)
      }
      // 更新cai之后，保存到本地存储中
      localStorage.setItem("car", JSON.stringify(state.car))

    },
    updateGoodsInfo(state, goodsinfo) {
      // 修改购物车中商品的数量值
      state.car.some(item => {
        if (item.id == goodsinfo.id) {
          item.count = parseInt(goodsinfo.count)
          return true
        }
      })
      // 修改完毕后，把最新的购物车数据，保存到本地存储
      localStorage.setItem("car", JSON.stringify(state.car))
    },
    removeFromCar(state, id) {
      // 根据id 从store中的购物车删除对应的商品数据
      state.car.some((item, i) => {
        if (item.id == id) {
          state.car.splice(i, 1)
          return true;
        }
      })
      localStorage.setItem("car", JSON.stringify(state.car))

    }
  },
  getters: {
    getAllCount(state) {
      var c = 0;
      state.car.forEach(item => {
        c += item.count
      })
      return c
    },
    getGoodsCount(state) {
      var o = {}
      state.car.forEach(item => {
        o[item.id] = item.count
      })
      return o;
    },
    getGoodsSelected(State) {
      var o = {}
      state.car.forEach(item => {
        o[item.id] = item.selected
      })
      return o
    }
  }

})

// Vue.use(router)
const vm = new Vue({
  el: "#app",
  data: {},
  methods: {},
  router: router1,  //  1.4   挂载路由对象
  render: c => c(app),
  store: store   //挂载数据仓库
})
